<template>
  <div class="app-wrapper">
    <div class="content">
      <div class="title">里程碑名称</div>
      <div class="main">
        <el-form ref="createList" :model="createList" :rules="createListRules" auto-complete="on" label-position="left">
          <div class="tab">
            <div class="row">
              <label>里程碑名称</label>
              <el-form-item prop="name">
                <el-input
                  ref="name"
                  v-model="createList.name"
                  placeholder="请输入"
                  type="text"
                  name="name"
                  tabindex="1"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
            <div class="row">
              <label>里程碑描述</label>
              <el-form-item prop="description">
                <el-input
                  v-model="createList.description"
                  type="textarea"
                  resize="none"
                  :rows="4"
                  placeholder="请输入"
                  name="description"
                  maxlength="500"
                  tabindex="2"
                  auto-complete="off"
                />
              </el-form-item>
            </div>
          </div>
          <div class="tab">
            <div class="row">
              <label>预计开始时间/结束时间</label>
              <el-form-item prop="dataTime">
                <div class="block">
                  <el-date-picker
                    v-model="dataTime"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </div>
              </el-form-item>
            </div>
            <div class="row">
              <label>实际开始时间/结束时间</label>
              <el-form-item prop="dataTime1">
                <div class="block">
                  <el-date-picker
                    v-model="dataTime1"
                    value-format="yyyy-MM-dd"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                  />
                </div>
              </el-form-item>
            </div>
          </div>
          <!-- <div class="addNode">
            <div class="nodeTitle">里程碑节点</div>
            <div class="node" style="margin: -14px 0 0 97px;">
              <div class="pointbg">
                <div class="nodePoint" />
              </div>
              <span
                style=" margin: -12px 0 0 25px; display: block;"
                @click="addNodeData"
              >+添加节点</span>
            </div>
            <div class="node">
              <div class="infoMsg">
                <div
                  v-for="(value, index) in createList.progressNodeList"
                  :key="index"
                  style="width: 100%;display: inherit;"
                >
                  <div class="pointbg">
                    <div style="margin: -17px 0 4px 3px;" class="line" />
                    <div class="circle" />
                    <div class="line" />
                  </div>
                  <div class="text">
                    <el-upload
                      ref="upload"
                      class="avatar-uploader"
                      :action="pathUrl+'/file/img'"
                      :show-file-list="false"
                      :with-credentials="true"
                      :on-success="(response, file, fileList)=>handleAvatarSuccess(response, file, fileList,index)"
                      :before-upload="beforeAvatarUpload"
                    >
                      <img v-if="value.fileUrl" :src="value.fileUrl" class="avatar">
                      <div v-else class="uploadbg">
                        <img src="../../assets/images/upload-bg.png" alt="">
                        <span class="upoadtext">上传图片</span>
                      </div>
                    </el-upload>
                  </div>
                  <div class="textarea">
                    <el-form-item prop="description">
                      <el-input
                        v-model="value.description"
                        type="textarea"
                        :rows="4"
                        resize="none"
                        placeholder="请输入简介"
                        name="description"
                        maxlength="500"
                        tabindex="4"
                        auto-complete="off"
                      />
                    </el-form-item>
                  </div>
                  <div style="float:left;margin: -97px 0 0 8px;">
                    <div class="upimg">
                      <div style="float: left;margin: 0 10px 0 0;" @click="sureBtn(value,index)">修改</div>
                      <div style="float: left;margin: 0 10px 0 0;" @click="deleteBtn(value,index)">删除</div>
                      <div @click="cancel(value,index)">取消</div>
                    </div>
                  </div>
                </div>

              </div>
            </div>
          </div> -->

          <div class="tab">
            <div class="imgtitle">
              <label>上传照片</label>
              <div style="margin: 20px 0 0 0;">
                <el-form-item>
                  <el-upload
                    ref="upload"
                    :action="pathUrl+'/file/img'"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <i class="el-icon-plus" />
                  </el-upload>
                  <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                  </el-dialog>
                </el-form-item>
              </div>
            </div>
          </div>

          <div class="tab">
            <div class="row">
              <div v-if="createList.files" class="imgtext" style="margin-left: 33px;">历史照片：</div>
              <div v-for="(img, key) in createList.files" :key="key" class="imgList">
                <div>
                  <img
                    style="width:150px;height:100px;margin: 0 0 5px 10px;"
                    :src="img.path"
                    :alt="img.name"
                  >
                  <i
                    class="el-icon-delete"
                    style="position: absolute;
                           color: #ffffff;
                          margin: -5% 0px 0px 6%;"
                    @click="deleteImg(img.id)"
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="btnsubmit">
            <el-button
              type="primary"
              class="create"
              @click.native.prevent="submitData"
            >编辑</el-button>
            <el-button
              type="primary"
              class="cancel"
              @click="comeBack"
            >取消</el-button>
          </div>

        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
import { detailManagerment, updateManagerment } from '@/api/progressManagement'

// import { uploadFiles, deleteFiles } from '@/api/file'
import { deleteFiles } from '@/api/file'
export default {
  name: 'EdgeProgress',
  components: {
  },
  data() {
    return {
      pathUrl: process.env.VUE_APP_BASE_API,
      dataTime: [],
      dataTime1: [],
      createList: {
        name: '',
        description: '',
        estimatedStartTime: '',
        estimatedEndTime: '',
        startTime: '',
        completionTime: '',
        files: []
        // progressNodeList: []// 节点列表
      },
      // 上传图片
      dialogImageUrl: '',
      dialogVisible: false,
      imagePath: '',
      imageId: '',
      imageName: '',
      imagerType: ['image/jpeg', 'image/gif', 'image/bmp', 'image/png', 'image/jpg'],
      createListRules: {
        name: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '必填', trigger: 'blur' }
        ]
      },
      loading: false,
      getSubmitData: false
    }
  },
  computed: {

  },
  mounted() {
    this.getDetail()
  },
  methods: {
    // 详情
    async getDetail() {
      const id = this.$route.query.id
      const res = await detailManagerment(id)
      if (res.code === 200) {
        this.createList = res.data
        this.dataTime.push(this.createList.estimatedStartTime)
        this.dataTime.push(this.createList.estimatedEndTime)
        if (this.createList.startTime) {
          this.dataTime1.push(this.createList.startTime)
        }
        if (this.createList.startTime) {
          this.dataTime1.push(this.createList.completionTime)
        }
      }
    },
    async deleteImg(id) {
      const res = await deleteFiles(id)
      if (res.code === 200) {
        this.createList.files.splice(this.createList.files.findIndex(item => item.id === id), 1)
        this.$message({
          type: 'success',
          message: '图片删除成功!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      } else {
        console.log('图片删除失败!')
      }
      // console.log(file, fileList)
    },
    // addNodeData() {
    //   this.createList.progressNodeList.push(
    //     {
    //       fileId: '',
    //       name: '',
    //       fileUrl: '',
    //       description: ''
    //     }
    //   )
    // },
    // cancel(data, index) {
    //   if (data.fileId === '') {
    //     this.createList.progressNodeList.splice(index, 1)
    //   }
    // },
    // 删除节点
    // async deleteBtn(data, index) {
    //   if (data.fileId === '') {
    //     this.$message({
    //       type: 'error',
    //       message: '节点信息填写完成,确认提交后可删除!',
    //       showClose: true,
    //       center: true,
    //       duration: 2 * 1000
    //     })
    //   } else {
    //     const res = await deleteProgressNode(data.id)
    //     if (res.code === 200) {
    //       this.$message({
    //         type: 'success',
    //         message: '删除节点成功!',
    //         showClose: true,
    //         center: true,
    //         duration: 2 * 1000
    //       })
    //       this.createList.progressNodeList.splice(index, 1)
    //     }
    //   }
    // },
    // // 修改节点
    // async sureBtn(data, index) {
    //   if (data.fileId === '') {
    //     this.$message({
    //       type: 'error',
    //       message: '节点信息填写完成,确认提交后可编辑修改!',
    //       showClose: true,
    //       center: true,
    //       duration: 2 * 1000
    //     })
    //   } else {
    //     const res = await updateProgressNode(data)
    //     if (res.code === 200) {
    //       this.$message({
    //         type: 'success',
    //         message: '修改节点成功!',
    //         showClose: true,
    //         center: true,
    //         duration: 2 * 1000
    //       })
    //     }
    //   }
    // },
    comeBack() {
      this.$router.go(-1)
    },
    // 图片上传
    // handleAvatarSuccess(res, file, fileList, index) {
    //   // this.createList.progressNodeList[index].imageUrl = URL.createObjectURL(file.raw)
    //   if (res.code === 200) {
    //     this.createList.progressNodeList[index].fileId = res.data.id
    //     this.createList.progressNodeList[index].name = res.data.name
    //     this.createList.progressNodeList[index].fileUrl = res.data.path
    //   } else {
    //     this.$refs.upload.clearFiles()
    //     this.$message({
    //       type: 'error',
    //       message: res.msg || 'error',
    //       showClose: true,
    //       center: true,
    //       duration: 2 * 1000
    //     })
    //   }
    // },
    // beforeAvatarUpload(file) {
    //   // eslint-disable-next-line no-unneeded-ternary
    //   const isJPG = this.imagerType.indexOf(file.type) !== -1 ? true : false
    //   const isLt10M = file.size / 1024 / 1024 < 10
    //   if (!isJPG) {
    //     this.$message({
    //       type: 'error',
    //       message: '上传头像图片只能是 JPG 格式!',
    //       showClose: true,
    //       center: true,
    //       duration: 2 * 1000
    //     })
    //   }
    //   if (!isLt10M) {
    //     this.$message({
    //       type: 'error',
    //       message: '上传图片大小不能超过 10MB!',
    //       showClose: true,
    //       center: true,
    //       duration: 2 * 1000
    //     })
    //   }
    //   return isJPG && isLt10M
    // },
    handleAvatarSuccess(res, file, fileList) {
      // this.createList.progressNodeList[index].imageUrl = URL.createObjectURL(file.raw)
      if (res.code === 200) {
        this.createList.files.push(res.data)
      } else {
        this.$refs.upload.clearFiles()
        this.$message({
          type: 'error',
          message: res.msg || 'error',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
    },
    beforeAvatarUpload(file) {
      // eslint-disable-next-line no-unneeded-ternary
      const isJPG = this.imagerType.indexOf(file.type) !== -1
      const isLt10M = file.size / 1024 / 1024 < 10
      if (!isJPG) {
        this.$message({
          type: 'error',
          message: '上传头像图片只能是 JPG,JPEG,PNG,GIF 格式!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
      if (!isLt10M) {
        this.$message({
          type: 'error',
          message: '上传图片大小不能超过 10MB!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      }
      return isJPG && isLt10M
    },
    async handleRemove(file, fileList) {
      const id = file.response.data.id
      const res = await deleteFiles(id)
      if (res.code === 200) {
        this.createList.files.splice(this.createList.files.findIndex(item => item.id === id), 1)
        this.$message({
          type: 'success',
          message: '图片删除成功!',
          showClose: true,
          center: true,
          duration: 2 * 1000
        })
      } else {
        console.log('图片删除失败!')
      }
      // console.log(file, fileList)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    submitData() {
      this.$refs.createList.validate(valid => {
        if (valid) {
          this.loading = true
          if (this.dataTime.length > 0) {
            this.createList.estimatedStartTime = this.dataTime[0]
            this.createList.estimatedEndTime = this.dataTime[1]
          }
          if (this.dataTime1.length > 0) {
            this.createList.startTime = this.dataTime1[0]
            this.createList.completionTime = this.dataTime1[1]
          }
          updateManagerment(this.createList).then(res => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '编辑成功!',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
              this.$router.push('progressManagement')
            } else {
              this.$message({
                type: 'error',
                message: res.msg || 'error',
                showClose: true,
                center: true,
                duration: 2 * 1000
              })
            }
          })
          // if (this.createList.progressNodeList.length > 0) {
          //   for (let i = 0; i < this.createList.progressNodeList.length; i++) {
          //     if (this.createList.progressNodeList[i].fileUrl === '') {
          //       this.$message({
          //         type: 'error',
          //         message: '请上传图片信息!',
          //         showClose: true,
          //         center: true,
          //         duration: 2 * 1000
          //       })
          //       this.getSubmitData = false
          //       break
          //     } else {
          //       this.getSubmitData = true
          //     }
          //   }
          //   if (this.getSubmitData) {
          //     this.loading = true
          //     updateManagerment(this.createList).then(res => {
          //       if (res.code === 200) {
          //         this.$message({
          //           type: 'success',
          //           message: '编辑成功!',
          //           showClose: true,
          //           center: true,
          //           duration: 2 * 1000
          //         })
          //         this.$router.push('progressManagement')
          //       } else {
          //         this.createList.progressNodeList = []
          //         this.$message({
          //           type: 'error',
          //           message: res.msg || 'error',
          //           showClose: true,
          //           center: true,
          //           duration: 2 * 1000
          //         })
          //       }
          //     })
          //   }
          // } else {
          //   this.$message({
          //     type: 'error',
          //     message: '请上传图片信息!',
          //     showClose: true,
          //     center: true,
          //     duration: 2 * 1000
          //   })
          // }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$color:rgba(247,181,0,1);
  .app-wrapper{
    .content{
      width: 98%;
      min-height: 700px;
      background: rgba(37,38,47,1);
      margin: 20px auto 0 auto;
      .title{
        padding: 30px 0 20px 34px;
        font-size:20px;
        font-weight:500;
        color:rgba(247,181,0,1);
      }
      .main{
        margin: 24px 128px 0 41px;
        padding-bottom: 25px;
        .tab{
          display: flex;
          margin-bottom: 20px;
          .row{
            flex: 1;
            margin-right: 30px;
            .el-form-item{
              width: 350px;
            }
            label{
              font-size:14px;
              font-weight:400;
              color:rgba(247,181,0,0.8);
           }
           .el-input{
              margin: 8px 0 0 0;
           }
           .el-textarea{
             margin: 8px 0 0 0;
             background: transparent;
           }
           .el-select{
              display: block;
              margin: 8px 0 0 0;
           }
           .block{
             margin: 8px 0 0 0;
           }
          }
        }
        .addNode{
          .nodeTitle{
            font-size:14px;
            font-weight:400;
            color:$color;
          }
          .node{
            // display: flex;
            font-size:12px;
            font-weight:400;
            color:$color;
            margin: 20px 0 0 97px;
            cursor: pointer;
            .nodePoint{
              width: 12px;
              height: 12px;
              border: 2px solid $color;
              border-radius: 10px;
            }
            .pointbg{
              .circle{
              width: 12px;
              height: 12px;
              background: #252532;
              border-radius: 50px;
              }
              .line{
                width: 1px;
                height: 86px;
                border: 1px solid #F7B500;
                margin: 4px 0 0 3px;
              }
            }
            span{
                margin-left: 10px;
              }
            .infoMsg{
              // display: flex;
              width: 100%;
              .text{
                margin: -145px 0 0 22px;
                width: 162px;
                height: 95px;
                border-radius: 4px;
                border:1px solid $color;
                .uploadbg{
                  width: 160px;
                  margin: 23px 0 0 0;
                  .upoadtext{
                    margin: 0 auto;
                    margin-top: 12px;
                    display: block;
                  }
                }
              }
              .textarea{
                width: 578px;
                margin: -95px 8px 0 192px;
                float: left;
              }
              .upimg{
                width:140px;
                height:20px;
                font-size:14px;
                font-weight:400;
                color:$color;
                line-height: 87px;
              }
            }
          }
        }
      }
      .btnsubmit{
        text-align: center;
        margin-top: 60px;
        .create{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,1);
          width:60px;
          height:32px;
          margin-right: 5px;
          background:#F7B500;
        }
        .cancel{
          cursor: pointer;
          padding: 7px 10px 7px 10px;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(255,255,255,0.8);
          width:60px;
          height:32px;
          background:#F7B500;
          opacity:0.4;
        }
      }
    }
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #F7B500;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 100%;
    height: 92px;
    display: block;
  }
  .imgtitle{
    font-size: 14px;
    font-weight: 400;
    color: rgba(247,181,0,.8);
  }
  .imgtext{
    font-size: 14px;
    font-weight: 400;
    color: rgba(247,181,0,.8);
    margin: 0 0 20px 0;
  }
  .imgList{
    cursor: pointer;
    width: 150px;
    float: left;
    margin-right: 20px;
    div{
       margin-left: 10px;
    }
  }
</style>
